<template>
  <div class="flex">
    <div class="left">
      <h4 style="font-weight: 600;">组件
        <span style="font-size:14px;font-weight:400;">共{{ total }}个</span>
      </h4>
      <div
        style="margin-top:30px"
        v-for="item,index in menuList"
        :key="index"
      >
        <div style="margin-bottom:5px;border-bottom:1px solid #f0f0f0;height: 30px;margin-left: -15px;">
          {{index+1}}.{{ item.type}}<span style="font-size:14px;font-weight:400;margin-left: 5px;">共{{ item.childrens.length }}个</span>
        </div>
        <ul>
          <li
            v-for="item1,index1 in item.childrens"
            :key="index1"
            @click="goToRouter(item1.name)"
            :class="$route.name==item1.name?'active':''"
          >
            {{ item1.title }}
          </li>
        </ul>
      </div>

    </div>

    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      total: 0,
      menuList: [
        {
          type: '高级组件',
          childrens: [
            {
              title: 'Surely Table',
              name: 'SurelyTable',
            },
            {
              title: 'Surely Form',
              name: 'SurelyForm',
            }
          ]

        },
        {
          type: '通用',
          childrens: [{
            title: '按钮',
            name: 'button',
          },
          {
            title: '图标',
            name: 'icon',
          },
          {
            title: '排版',
            name: 'typography',
          },]
        },
        {
          type: '布局',
          childrens: [{
            title: '分割线',
            name: 'divider',
          },
          {
            title: '弹性布局',
            name: 'flex',
          },
          {
            title: '栅格',
            name: 'grid',
          },
          {
            title: '布局',
            name: 'layout',
          },
          {
            title: '间隔',
            name: 'space',
          },
          ]
        },
        {
          type: '导航',
          childrens: [
            {
              title: '锚点',
              name: 'anchor',
            },
            {
              title: '面包屑',
              name: 'breadcrumb',
            },
            {
              title: '下拉菜单',
              name: 'dropdown',
            },
            {
              title: '导航菜单',
              name: 'menu',
            },
            {
              title: '页头',
              name: 'pageheader',
            },
            {
              title: '分页',
              name: 'pagination',
            },
            {
              title: '步骤条',
              name: 'steps',
            },
          ]
        },
        {
          type: '数据录入',
          childrens: [
            {
              title: '自动完成',
              name: 'autocomplete',
            },
            {
              title: '级联选择',
              name: 'cascader',
            },
            {
              title: '多选框',
              name: 'checkbox',
            },
            {
              title: '日期选择框',
              name: 'datepicker',
            },
            {
              title: '表单',
              name: 'form',
            },
            {
              title: '输入框',
              name: 'input',
            },

            {
              title: '数字输入框',
              name: 'inputnumber',
            },
            {
              title: '提及',
              name: 'mentions',
            },
            {
              title: '单选框',
              name: 'radio',
            },
            {
              title: '评分',
              name: 'rate',
            },
            {
              title: '选择器',
              name: 'select',
            },

            {
              title: '滑动输入条',
              name: 'slider',
            },
            {
              title: '开关',
              name: 'switch',
            },
            {
              title: '时间选择框',
              name: 'timepicker',
            },
            {
              title: '穿梭框',
              name: 'transfer',
            },
            {
              title: '树选择',
              name: 'treeselect',
            },
            {
              title: '上传',
              name: 'upload',
            },
          ]
        },
        {
          type: '数据展示',
          childrens: [
            {
              title: '头像',
              name: 'avatar',
            },
            {
              title: '徽标数',
              name: 'badge',
            },
            {
              title: '日历',
              name: 'calendar',
            },
            {
              title: '卡片',
              name: 'card',
            },
            {
              title: '走马灯',
              name: 'carousel',
            },
            {
              title: '折叠面板',
              name: 'collapse',
            },
            {
              title: '评论',
              name: 'comment',
            },

            {
              title: '描述列表',
              name: 'descriptions',
            },
            {
              title: '空状态',
              name: 'empty',
            },
            {
              title: '图片',
              name: 'image',
            },
            {
              title: '列表',
              name: 'list',
            },
            {
              title: '气泡卡片',
              name: 'popover',
            },
            {
              title: '二维码',
              name: 'qrcode',
            },
            {
              title: '分段控制器',
              name: 'segmented',
            },
            {
              title: '统计数值',
              name: 'statistic',
            },

            {
              title: '表格',
              name: 'table',
            },
            {
              title: '标签页',
              name: 'tabs',
            },
            {
              title: '标签',
              name: 'tag',
            },
            {
              title: '时间轴',
              name: 'timeline',
            },
            {
              title: '文字提示',
              name: 'tooltip',
            },
            {
              title: '漫游式引导',
              name: 'tour',
            },
            {
              title: '树形控件',
              name: 'tree',
            },
          ]
        },
        {
          type: '反馈',

          childrens: [
            {
              title: '警告提示',
              name: 'alert',
            },
            {
              title: '抽屉',
              name: 'drawer',
            },
            {
              title: '全局提示',
              name: 'message',
            },
            {
              title: '对话框',
              name: 'modal',
            },
            {
              title: '通知提醒框',
              name: 'notification',
            },
            {
              title: '气泡确认框',
              name: 'popconfirm',
            },
            {
              title: '进度条',
              name: 'progress',
            },

            {
              title: '结果',
              name: 'result',
            },
            {
              title: '骨架屏',
              name: 'skeleton',
            },
            {
              title: '加载中',
              name: 'spin',
            },

          ]
        },
        {
          type: '其他',
          childrens: [
            {
              title: '固钉',
              name: 'affix',
            },
            {
              title: '全局化配置',
              name: 'configProvider',
            },
            {
              title: '悬浮按钮',
              name: 'floatButton',
            },
            {
              title: '水印',
              name: 'watermark',
            },
          ]

        },
        {
          type: '其它',
          childrens: [
            {
              title: '包裹组件',
              name: 'app',
            }
          ]

        }
      ]
    }
  },
  created() { },
  mounted() {
    this.menuList.map((item) => {
      this.total += item.childrens.length
    })
  },
  methods: {
    goToRouter(name) {
      this.$router.push({ name: name });
    }
  },
  computed: {}
}
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  .left {
    text-align: center;
    min-width: 200px;
    border-right: 1px solid #f0f0f0;
    padding: 20px 0;
    overflow: auto;
    height: 100vh;
    ul {
      padding: 0;
      li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        list-style-type: none;
      }
      li:hover {
        background: yellow;
      }
      .active {
        background: yellow;
      }
    }
  }
  .right {
    flex: 1; //剩下的 宽度 都给
    overflow: auto;
    padding: 20px;
    height: 100vh;
  }
}
</style>
